<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="${base}/css/orderinfo.css" />
		<title>Breaking Fast</title>
		<%@ include file="/common/commonstyle.jsp" %>
		<script type="text/javascript"><!--
			function commitOrder(orderid) {
				if(null == orderid) {
					jAlert("请先完善收货人信息！");
					return false;
				} else {
					return true;
				}
			}
			
 			//增加地址
 			function addSite() {
 				$("#username").val("");
 				$("#phone").val("");
 				$("#siteinfo").val("");
 				$("#siteId").val("");
 				$("#isdefault").prop("checked", false);
 				$("#siteDiv").show();
 			}
 			
 			//修改地址
 			function updateSite(site) {
 				var userName = $(site).parent().find("input[name=userName]").val();
 				var phone = $(site).parent().find("input[name=phone]").val();
 				var siteInfo = $(site).parent().find("input[name=siteInfo]").val();
 				var siteId = $(site).parent().find("input[name=siteId]").val();
 				var isdefault = $(site).parent().find("input[name=isDefault]").val();
 				$("#username").val(userName);
 				$("#phone").val(phone);
 				$("#siteinfo").val(siteInfo);
 				$("#siteId").val(siteId);
 				if(1 == isdefault) {
 					$("#isdefault").prop("checked", true);
 				} else {
 					$("#isdefault").prop("checked", false);
 				}
 				$("#siteDiv").show();
 			}
 			
 			//关闭地址信息输入层
 			function closeSite() {
 				$("#username").val("");
 				$("#phone").val("");
 				$("#siteinfo").val("");
 				$("#siteId").val("");
 				$("#isdefault").prop("checked", false);
 				$("#siteDiv").hide();
 			}
			
 			//显示所有地址
 			function displayAllSite() {
 				$("#displayAllBtn").hide();
 				$("#sitelist li").show();
 			}
 			
 			//选中地址地址
 			function checkSite(siteId) {
 				$("#sitelist li").removeClass("hover");
 				$("#siteInfo" + siteId).addClass("hover");
 				$("#sitelist").find("input[type=radio]").each(function() {
 					this.checked = "";
 				});
 				$("#siteInfo" + siteId).find("input[type=radio]").prop("checked", true);
 			}
			
 			//保存联系地址
 			function saveSite() {
 				var siteId = $("#siteId").val();
 				var userName = $("#username").val();
 				var phone = $("#phone").val();
 				var siteInfo = $("#siteinfo").val();
 				var isdefault = $("#isdefault").prop("checked");
 				if("" == userName.trim() || "" == phone.trim() || "" == siteInfo.trim()) {
 					jAlert("收货人信息不完整！请确认！");
 					return;
 				}
 				if(!new RegExp(regexEnum.Illegal).test(userName)) {
 					jAlert("用户名中包含非法字符！");
 					return;
 				}
 				if(!new RegExp(regexEnum.mobile).test(phone)) {
 					jAlert("你输入的手机号码格式不正确!");
 					return;
 				}
 				if(!new RegExp(regexEnum.Illegal).test(siteInfo)) {
 					jAlert("地址中包含非法字符！");
 					return;
 				}
 				if(true == isdefault) {
 					isdefault = 1;
 				} else {
 					isdefault = 0;
 				}
 				ajaxUpdateSite(siteId, userName, phone, siteInfo, isdefault);
 			}
 			
 			//修改默认地址
 			function setDefaultSite(site) {
 				var userName = $(site).parent().parent().find("input[name=userName]").val();
 				var phone = $(site).parent().parent().find("input[name=phone]").val();
 				var siteInfo = $(site).parent().parent().find("input[name=siteInfo]").val();
 				var siteId = $(site).parent().parent().find("input[name=siteId]").val();
 				ajaxUpdateSite(siteId, userName, phone, siteInfo, 1);
 			}
 			
 			function ajaxUpdateSite(siteId, userName, phone, siteInfo, isdefault) {
				$.ajax({
					url: "${base}/siteCtl/addSite",
					type: "post",
					data:{
						siteid: siteId,
						username: userName,
						phone: phone,
						siteinfo: siteInfo,
						isdefault: isdefault
					},
					success: function(result){
 						$("#siteDiv").hide();
						var isDefault = "<span>默认地址</span>";
						var notDefault= "<span><a href='#' onclick='setDefaultSite(this)'><spring:message code='isdefault' /></a></span>";
						var remove = "<a href='#' onclick='deleteSite(" + result.siteid + ")'>[删除]</a>";
						var siteLi = "<a href='#' onclick='updateSite(this)'>[修改地址]</a>" +
			                		"<input type='radio' name='userSite' value='" + result.siteid + "' onclick='checkSite(this)' checked/>" +
			                    	"&nbsp;&nbsp;" + result.siteinfo + "&nbsp;&nbsp;(" + result.username + ")&nbsp;&nbsp;" + result.phone;
						var siteInfo = "<input type='hidden' name='siteId' value='" + result.siteid + "' />" +
			                    	"<input type='hidden' name='siteInfo' value='" + result.siteinfo + "' />" +
			                    	"<input type='hidden' name='userName' value='" + result.username + "' />" +
			                    	"<input type='hidden' name='phone' value='" + result.phone + "' />" +
			                    	"<input type='hidden' name='isDefault' value='" + result.isdefault + "' />"
						if(1 == result.isdefault) {
							//将其他默认地址修改为普通地址
			            	var oldDefaultSite = $("#sitelist li").find("input[name=isDefault][value=1]");
			            	if(0 < oldDefaultSite.length) {
			            		oldDefaultSite.val(0);
			            		oldDefaultSite.parent().prepend(remove);
			            		oldDefaultSite.parent().find("span").html("<a href='#' onclick='setDefaultSite(this)'><spring:message code='isdefault' /></a>");
			            	}
						}
						$("#sitelist li").removeClass("hover");
						if("" == siteId) {
							if(1 == result.isdefault) {
								$("#sitelist").append("<li class='hover' id='siteInfo" + result.siteid + "' onclick='checkSite(" + result.siteid + ")'>" + siteLi + isDefault + siteInfo + "</li>");
							} else {
								$("#sitelist").append("<li class='hover' id='siteInfo" + result.siteid + "' onclick='checkSite(" + result.siteid + ")'>" + remove + siteLi + notDefault + siteInfo + "</li>");
							}
						} else {
							$("#siteInfo" + siteId).addClass("hover");
							if(1 == result.isdefault) {
								$("#siteInfo" + siteId).html(siteLi + isDefault + siteInfo);
							} else {
								$("#siteInfo" + siteId).html(remove + siteLi + notDefault + siteInfo);
							}
						}
					}
				});
 			}
 			
 			function deleteSite(siteId) {
				$.ajax({
					url: "${base}/siteCtl/deleteSite",
					type: "post",
					data:{
						siteId: siteId
					},
					success: function(result){
						if(true == result) {
 							displayAllSite();
							$("#siteInfo" + siteId).remove();
						}
					}
				});
 			}
 			
			function changeWaresCount(count, wareId, wareType) {
				var wareCount = $(count).val();
				$.ajax({
					url: "${base}/orderFrontCtl/updateShopCar",
					type: "post",
					data:{
						waresId: wareId,
						waresType: wareType,
						waresCount: wareCount
					},
					success: function(result){
						$("#shopCarPrice").html("￥" + result + "元");
						if(0 == wareCount) {
							$("#waresInfo" + wareId).remove();
						}
					}
				});
			}
			
			$(function() {
				$("#loginForm").submit(function(){
					var email = $("#email").val();
					var password = $("#password").val();
					if(null == email || "" == email) {
						jAlert("<spring:message code='loginempty' />");
						return false;
					} else if(null == password || "" == password) {
						jAlert("<spring:message code='loginempty' />");
						return false;
					} else {
						return true;
					}
				});
			});
		--></script>
	</head>
	
	<body>
		<div class="main">
			<div class="nav">
				<p></p>
        		<ul class="leaf">
	       	    	<li>Real Food</li>
	                <li>Healthy</li>
	                <li>Easy to get</li>
				</ul>
				<c:if test="${null == frontCurrentUser}">
		            <div class="login_alert">
		            	<ul>
		                	<li class="flip"><a href="#" onclick="loginModel()"><spring:message code="login" />/<spring:message code="register" /></a></li>
							<li class="china"><a href="${base}/i18nCtl/language?locale=zh_CN">中文</a><a href="${base}/i18nCtl/language?locale=en_US">/English</a></li>
		                </ul>
		            </div>
		            <div class="panel">
		            	<form:form id="loginForm" method="post" action="${base}/frontUserCtl/userLogin">
			            	<ul>
			                	<li><spring:message code="username" />：</li>
			                    <li><input type="text" id="email" name="email" class="text_dl" maxlength="25" /></li>
			                    <li><spring:message code="password" />：</li>
			                    <li><input type="password" id="password" name="password" class="text_dl" /></li>
			                    <li><input type="submit" value="<spring:message code='login' />" class="btn_dl" /></li>
			                </ul>
		                </form:form>
		            </div>
	            </c:if>
	            <c:if test="${null != frontCurrentUser}">
		            <div class="login_alert">
		            	<ul>
		                	<li class="flip"><a href="#" onclick="location.href='${base}/frontUserCtl/userLogout'"><spring:message code="logout" /></a></li>
	                    	<li><spring:message code="hello" />！<a href="#" onclick="location.href='${base}/userinfo'">${frontCurrentUser.username}</a></li>
							<li class="china"><a href="${base}/i18nCtl/language?locale=zh_CN">中文</a><a href="${base}/i18nCtl/language?locale=en_US">/English</a></li>
		                </ul>
		            </div>
	            </c:if>
			</div>
			<div class="title">
               	<jsp:useBean id="now" class="java.util.Date" />
		  		<p>
		  			<span>今天<fmt:formatDate value="${now}" pattern="M月d日" />，Got your diary today?</span>
	  			</p>
				<div>登陆  |  注册  |   我的BF |  <a href="#" onclick="toShopCar('${frontCurrentUser.userid}')">餐盘</a></div>
	  		</div>
			<div class="nav_02">
				<ul>
					<li class="color_01"><a href="${base}/index">首页</a></li>
					<li class="color_02"><a href="${base }/waresFrontCtl/menuInfo">个人订餐</a></li>
		            <li class="color_03"><a href="${base}/waresFrontCtl/businessMenuInfo">商务订餐</a></li>
					<li class="color_04"><a href="${base}/health1">健康信息</a></li>
					<li class="color_05"><a href="${base}/orderinput">配送范围</a></li>
		            <li class="color_06"><a href="#">送餐给亲友</a></li>
					<li class="color_07"><a href="#">联系我们</a></li>
		        </ul>
		    </div>
		    <div class="main_bottom">
		        <div class="column">订单信息核对</div>
		        <div class="column_01">填写并核对订单信息</div>
		        <div class="column_02">
		            <p>收货人信息</p>
					<div class="address">
						<ul id="sitelist">
		            		<c:forEach items="${siteList}" var="site" varStatus="siteIndex">
			                    <li id="siteInfo${site.siteid}" class="${1 == site.isdefault ? 'hover' : ''}" style="display:${siteIndex.index > 2 ? 'none' : 'block'}" onclick="checkSite(${site.siteid})">
			                		<a href="#" onclick="deleteSite(${site.siteid})">[删除]</a>
			                		<a href="#" onclick="updateSite(this)">[修改地址]</a>
			                		<input type="radio" name="userSite" value="${site.siteid}" onclick="checkSite(${site.siteid})" ${1 == site.isdefault ? "checked" : "" }/>
			                    	&nbsp;&nbsp;${site.siteinfo}&nbsp;&nbsp;(${site.username})&nbsp;&nbsp;${site.phone}
			                    	<c:if test="${1 == site.isdefault}">
			                    		<span>默认地址</span>
			                    	</c:if>
			                    	<c:if test="${1 != site.isdefault}">
			                    		<span><a href="#" onclick="setDefaultSite(this)"><spring:message code='isdefault' /></a></span>
			                    	</c:if>
			                    	<input type="hidden" name="siteId" value="${site.siteid}" />
			                    	<input type="hidden" name="siteInfo" value="${site.siteinfo}" />
			                    	<input type="hidden" name="userName" value="${site.username}" />
			                    	<input type="hidden" name="phone" value="${site.phone}" />
			                    	<input type="hidden" name="isDefault" value="${site.isdefault}" />
		                    	</li>
		                    </c:forEach>
		                </ul>
		                <p><a id="displayAllBtn" href="#" onclick="displayAllSite()">使用其他地址</a></p>
		                <h2><input name="" type="button" value="使用新地址" class="btn_add" onclick="addSite()" /></h2>
					</div>
		            <div id="siteDiv" class="address_new" style="display:none">
						<table width="900" border="0">
			            	<tr>
                				<td width="100" height="40" align="right" valign="middle">*<spring:message code="username" />：</td>
                				<td height="40"><input type="text" id="username" name="username" class="xingming" maxlength="25" /></td>
			            	</tr>
			            	<tr>
                				<td width="100" height="40" align="right" valign="middle">*<spring:message code="phone" />：</td>
                				<td height="40"><input type="text" id="phone" name="phone" class="xingming" maxlength="11" /></td>
			            	</tr>
			            	<tr>
                				<td width="100" height="40" align="right" valign="middle">*<spring:message code="site" />：</td>
                				<td height="40"><textarea id="siteinfo" name="siteinfo" class="jiedao" maxlength="250" ></textarea></td>
			            	</tr>
			            	<tr>
                				<td width="100" height="40" align="right" valign="middle">*<spring:message code="isdefault" />：</td>
                				<td height="40"><input type="checkbox" id="isdefault" name="isdefault" value="1" checked="false"/></td>
			            	</tr>
			            	<tr>
				                <td width="100" height="40" align="right" valign="middle">&nbsp;</td>
				                <td height="40">
			            			<input type="button" class="xin_01" value="<spring:message code='save' />" onclick="saveSite()" />
			            			<input type="hidden" id="siteId" />
			            			<input type="button" class="xin_02" value="<spring:message code='cancel' />" onclick="closeSite()" />
			            		</td>
			            	</tr>
			            </table>
		            </div>
		        </div>
		        <div class="column_02">
		            <p>支付及配送方式<a href="#" onclick="location.href='${base}/orderinput'">[修改]</a></p>
		            <ul>
		                <li>货到付款</li>
		                <li>BF快件&nbsp;&nbsp;&nbsp;9:30之前到货</li>
		            </ul>
		        </div>
		        <div class="column_02">
		            <p>支付及配送方式<a href="#" onclick="location.href='${base}/orderinput'">[修改]</a></p>
		            <ul>
		                <li>普通发票&nbsp;&nbsp;个人&nbsp;&nbsp;明细</li>
		            </ul>
		        </div>
		        <div class="wares">
		            <div class="qingdan_01">
		                <p>商品清单<a href="#" onclick="location.href='${base}/waresFrontCtl/menuInfo'">[修改]</a></p>
		            </div>
		            <div class="qingdan_02">
		            	<p>商品</p>
		                <ul>
		                    <li>单价</li>
		                    <li>数量</li>
		                    <li>价格</li>
		                </ul>
		            </div>
		            <c:forEach items="${shopCar}" var="wares">
			            <div class="shangpin" id="waresInfo${wares.waresId}">
			                <div class="shangpin_img">
			                	<img src="${base}${wares.photo}" width="64" height="64" alt="" />
		                	</div>
							<p>${i18n == 'en_US' ? wares.enName : wares.chName}</p>
			                <ul>
			                    <li>￥${wares.price}</li>
			                    <li><input type="text" value="${wares.count}" style="width: 30px;" onchange="changeWaresCount(this, '${wares.waresId}', '${wares.type}')"/></li>
			                    <li>￥${wares.totalPrice}</li>
			                </ul>
			            </div>
		            </c:forEach>
		            <div class="heji">
		            <p><span>￥${shopCarPrice}</span><a href="#" target="_blank">${order.warescount}</a>件商品,总商品金额:</p>
		                <p><span>-0.00</span>优惠劵:</p>
		                <p><span>￥10.00</span>送货费:</p>
		            </div>
		            <form:form method="post" action="${base}/orderFrontCtl/commitOrder" onsubmit="return commitOrder(${order.orderid})">
			            <div class="jiezhang">
		            		<input type="hidden" name="orderSubmitMark" value="${orderSubmitMark}"/>
		            		<input type="hidden" name="orderId" value="${order.orderid}"/>
                			<c:if test="${0 != fn:length(shopCar)}">
			                	<input type="submit" class="tijiao" value="提交订单"/>
			                </c:if>
		                	<p>应付总金额:<span id="shopCarPrice">￥${shopCarPrice}元</span></p>
		                </div>
	                </form:form>
		        </div>
		    </div>
			<div class="footer">
				<ul>
					<li><a href="#" target="_blank">关于BF</a></li>
					<li>|</li>
					<li><a href="#" target="_blank">FAQ</a></li>
					<li>|</li>
					<li><a href="#" target="_blank">联系我们</a></li>
				</ul>
			</div>
			<div class="footer_bg"></div>
		</div>
	</body>
</html>